import { useSelector, useDispatch } from 'react-redux'
import { add } from '../../store/modules/counterStore.js'
import { useRef } from 'react'
import { addList } from '../../store/modules/counterStore.js'

export default function index() {
    // 使用数据
    const { count, list } = useSelector((state) => state.counter) 
    const dispatch = useDispatch()  //触发器
    const inputRef = useRef(null)

    // 调用方法
    const addCount = () => {
        const action = add()
        dispatch(action)
    }

    return (
        <div>
            {/* <h3>{count}</h3>
            <button onClick={addCount}>+</button> */}
            <input type="text" ref={inputRef} />
            <button onClick={() => {
                if(inputRef.current.value){
                    const action = addList(inputRef.current.value)
                    dispatch(action)
                }
            }}>添加</button>
            <ul>
                {
                  list.map((item, index) => {
                    return <li key={index}>{item}</li>
                  })
                }
            </ul>
        </div>
    )
}